<template>
  <div class="contain">
    <baidu-map class="map" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" map-type="BMAP_HYBRID_MAP"
      @click="getLocation">
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" />
      <bm-marker v-if="markerPoint.lng" :position="{
        lng: markerPoint.lng,
        lat: markerPoint.lat,
      }" :dragging="false">
      </bm-marker>
      <BmlMarkerClusterer :average-center="true">
        <bm-marker v-for="(item, index) in groupLngLatArr" :key="index + 9999999999" :position="{
          lng: item.center.lng - 0.000003,
          lat: item.center.lat - 0.000043,
        }" :dragging="false" :icon="{ url: 'none', size: { width: 0, height: 0 } }">
          <bm-label :content="item[0].title.facilityName" :label-style="labelStyle"
            :offset="{ width: -5, height: 15 }" />
        </bm-marker>
      </BmlMarkerClusterer>
      <bm-polygon :path="lngLatArr" stroke-color="#ffdb5c" fill-color="#ffdb5c" :stroke-opacity="1" :fill-opacity="0.4"
        :stroke-weight="3" :editing="false" />
      <div v-for="(item, index) in groupLngLatArr" :key="index">
        <bm-polygon :path="item" stroke-color="#03F5EC" fill-color="#00fff6" :stroke-opacity="1" :fill-opacity="0.2"
          :stroke-weight="3" :editing="false" />
      </div>
    </baidu-map>
  </div>
</template>
<script>
import divideInfoManage from "@/api/basic-info-manage/fence-management";
import { BmlMarkerClusterer } from "vue-baidu-map";
export default {
  name: "Map",
  components: {
    BmlMarkerClusterer,
  },
  props: {
    lnglatForm: {
      type: Object,
      default: () => ({})
    },
    dialogVisible: {
      type: Boolean,
    },
  },
  data() {
    return {
      // 地图相关值
      center: { lng: 120.230648, lat: 30.811543 },
      noPoint: true,
      firstLoad: true,
      zoom: 17,
      lngLatArr: [],
      groupLngLatArr: [],
      labelStyle: {
        color: "#fffff0",
        fontSize: "12px",
        borderRadius: "8px",
        border: "none",
        backgroundColor: "#00a1c2",
        padding: "3px",
        opacity: ".8",
        letterSpacing: "2px",
        transform: "translateX(-32%)"
      },
      lnglat: {},
      markerPoint: {},
    };
  },
  watch: {
    lnglatForm: {
      handler(e) {
        if (e && e.lng) {
          if (this.firstLoad) {
            this.center = { ...e }
            this.noPoint = false
            this.firstLoad = false
          }
          this.markerPoint = { ...e }
          this.lnglat = { ...e }
        } else {
          this.markerPoint = {}
          this.lnglat = {}
        }
      },
      deep: true
    },
  },
  created() {
    this.FacilityPointList()
  },
  mounted() {
  },
  methods: {
    // 查询所有设施信息
    async FacilityPointList() {
      const { data: resp } = await divideInfoManage.queryAllFacilityDetail();
      // let facilityNameArr = resp;
      // console.log(resp)
      this.groupLngLatArr = [];
      let list = [];
      list = resp;
      this.facilityArr = resp;
      let lngLatAll = [];
      list.forEach((itemthree) => {
        if (itemthree.facilityPointList) {
          let lngLatArr = [];
          let facilityGroupArr = itemthree.facilityPointList;
          facilityGroupArr.forEach((item) => {
            const obj = {};
            obj["lng"] = item.axisY;
            obj["lat"] = item.axisX;
            obj["title"] = itemthree;
            lngLatArr.push(obj);
            lngLatAll.push(obj);
          });
          this.groupLngLatArr.push(lngLatArr);
          this.groupLngLatArr.forEach((item) => {
            item["center"] = this.getCenterPoint(item);
          });
        }
      });
      let center = this.getCenterPoint(lngLatAll);
      // setTimeout(() => {
      if (lngLatAll.length) {
        this.$nextTick(() => {
          if (this.noPoint) {
            this.center = {
              lng: center.lng || 120.230648,
              lat: center.lat || 30.811543
            };
          }
          if (this.groupLngLatArr.length >= 100) {
            this.zoom = 16;
            this.labelStyle.fontSize = "12px";
          } else if (
            this.groupLngLatArr.length >= 60 &&
            this.groupLngLatArr.length < 100
          ) {
            this.zoom = 17;
            this.labelStyle.fontSize = "12px";
          } else if (
            this.groupLngLatArr.length >= 15 &&
            this.groupLngLatArr.length < 60
          ) {
            this.zoom = 18;
            this.labelStyle.fontSize = "14px";
            this.labelStyle.transform = "translateX(-15%)";
          } else if (this.groupLngLatArr.length < 15) {
            this.zoom = 18;
            this.labelStyle.fontSize = "16px";
            this.labelStyle.transform = "translateX(0%)";
          }
        });
      } else {
        const { data: onInfo } =
          await divideInfoManage.queryonInfoByCondition();
        if (onInfo) {
          if (this.noPoint) {
            this.$set(this.center, "lng", onInfo.longitude);
            this.$set(this.center, "lat", onInfo.latitude);
          }
        }
      }
    },
    // 计算多边形中心点
    getCenterPoint(data) {
      let lng = 0.0;
      let lat = 0.0;
      // console.log(data)
      for (let point of data) {
        // console.log(point)
        lat += JSON.parse(point["lat"]);
        lng += JSON.parse(point["lng"]);
      }
      lng = lng / data.length + 0.000084;
      lat = lat / data.length + 0.000014;
      // console.log(lng, lat, data.length + 0.000084, data.length + 0.000014);
      return { lng: lng, lat: lat };
    },
    getLocation(e) {
      this.lnglat = {
        lng: e.point.lng,
        lat: e.point.lat,
      }
      this.updateLocation()
    },
    togdMap(lng, lat) {
      var X_PI = Math.PI * 3000.0 / 180.0
      var x = lng - 0.0065
      var y = lat - 0.006
      var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI)
      var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI)
      var gg_lng = z * Math.cos(theta)
      var gg_lat = z * Math.sin(theta)
      return { lng: gg_lng, lat: gg_lat }
    },
    tobdMap(x, y) {
      var x_pi = 3.14159265358979324 * 3000.0 / 180.0;
      var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
      var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
      var lng = z * Math.cos(theta) + 0.0065;
      var lat = z * Math.sin(theta) + 0.006;
      return { lat, lng };
    },
    updateLocation() {
      this.$emit('updateLocation', this.lnglat)
    },
  },
};
</script>
<style lang="scss" scoped>
.contain {
  width: 100%;
  height: 100%;
  position: relative;

  .map {
    width: 100%;
    height: 100%;
  }
}

::v-deep .BMap_cpyCtrl {
  display: none;
}

::v-deep .BMap_shadow {
  display: none;
}

::v-deep .anchorBL {
  display: none;
}

::v-deep .BMap_Marker {
  div {
    // display: none;
  }
}

::v-deep .BMap_noprint {
  display: block;
}

::v-deep .BMap_cpyCtrl {
  display: none;
}

::v-deep .map {
  >div:first-child {
    >div:first-child {
      >div:nth-child(2) {
        div:nth-last-child(3) {
          display: none;
        }
      }
    }
  }
}
</style>